<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>人员管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
        
    <link rel="stylesheet" type="text/css" href="css/myIndex.css">
</head>

<body>
    <input id="treeId" type="hidden" >
    <input id="treeName" type="hidden" >

    <div class="treeOprate">  
          <button class="layui-btn" id="addUser">新增</button>
    </div>

    <table class="layui-hide" id="test" lay-filter="demoEvent"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="disable">禁用</a>
        <a class="layui-btn layui-btn-xs" lay-event="enable">启用</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    <div id="userMange" class="displayNone">
        <form class="layui-form conPadding"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-form-item">
                <label class="layui-form-label">组织机构</label>
                <div class="layui-input-block">
                    <input type="text" name="orgName" id="orgName" lay-verify="required" placeholder="组织机构" readonly="readonly" autocomplete="off" class="layui-input cursorPointer">
                    <input id="orgCode" type="hidden" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信号</label>
                <div class="layui-input-block">
                    <input type="text" name="weCheat" placeholder="微信号"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="weName" placeholder="微信昵称" lay-verify="required|wename" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="姓名" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item buttonCenter">
                 <button class="layui-btn" lay-submit lay-filter="addCommit">提交</button>
                 <button class="layui-btn layui-btn-primary" id="closeUser">关闭</button>
            </div>
          <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
         </form>
    </div>
    
    <div class="displayNone treeSet" id="treeSet">
         <ul id="demoTree" class="demoTree"></ul>
         <div class="layui-form-item buttonCenter buttonBottom">
             <button class="layui-btn" id="sureButton">确定</button>
             <button class="layui-btn layui-btn-primary" id="closeButton">关闭</button>
        </div>
    </div>
       

    <script src="./plugins/layui/layui.js"></script>
    <script>
        window.onresize = function(){
            document.getElementById("demoTree").style.height = document.documentElement.clientHeight - 100 + "px";
        }  

        layui.use(['jquery','table','tree','form'], function($,table,tree,form){
            var orgTree,uerLayer;
            var winWidth = $(document).width()/10;
            var winHeight = $(document).height();

            $("#demoTree").height(winHeight - 100 + "px")
            
            //组织树
            layui.tree({
                elem: '#demoTree',
                nodes: [ //节点
                      {
                        name: '我的邮箱',
                        id: 1,
                        spread: true,
                        children: [
                          {
                            name: 'QQ邮箱',
                            id: 21,
                            spread: true,
                            children: [
                              {
                                name: '收件箱'
                                ,id: 211
                                ,children: [
                                  {
                                    name: '所有未读'
                                    ,id: 2111
                                  }, {
                                    name: '置顶邮件'
                                    ,id: 2112
                                  }, {
                                    name: '标签邮件'
                                    ,id: 2113
                                  }
                                ]
                              }, 
                              {
                                name: '已发出的邮件'
                                ,id: 212
                              }, 
                              {
                                name: '垃圾邮件'
                                ,id: 213
                              }
                            ]
                          }, {
                            name: '阿里云邮',
                            id: 22,
                            children: [
                              {
                                name: '收件箱',
                                id: 221
                              }, 
                              {
                                name: '已发出的邮件',
                                id: 222
                              }, 
                              {
                                name: '垃圾邮件',
                                id: 223
                              }
                            ]
                          }
                        ]
                      }
                    ],
                    click: function(node){
                        $("#treeId").val(node.id);
                        $("#treeName").val(node.name); 
                    }       
            });

            //弹出组织树
            $("#orgName").click(function(event) {
                orgTree = layer.open({
                     type:1,
                     title:'组织机构',
                     shade:0.3,
                     offset: 'r',
                     area:["400px", "100%"],
                     content: $("#treeSet")
                  })
            });

            //设置点击区域颜色
            $("body").on("mousedown",".layui-tree a",function(){ 
                $(".layui-tree a").css({'color':'#555','background':'#fff'}); 
                $(this).css({'color':'#fff','background':'lightblue'}) 
            });

            //确认组织机构
            $("#sureButton").click(function(event) {
                if($("#treeId").val() == 1){
                    layer.msg("顶级节点不能被操作！",{icon:5});
                    return;  
                }
                $("#orgName").val($("#treeName").val());
                $("#orgCode").val($("#treeId").val());
                layer.close(orgTree);
            });

            //关闭组织树
            $("#closeButton").click(function(event) {
                layer.close(orgTree);
            });

            //关闭新增用户
            $("#closeUser").click(function(event) {
                layer.close(uerLayer);
            });


            $("#addUser").click(function(event) {
                 uerLayer = layer.open({
                    type:1,
                    title:'新增人员',
                    area:["400px", "360px"],
                    content: $("#userMange")
                })
            });
            
            //验证
            form.verify({
                wename: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                        return '用户名不能有特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                        return '用户名不能全为数字';
                    }
                },
                pass: [
                    /^[\S]{6,12}$/,
                ] 
            }); 

            //监听提交
            form.on('submit(addCommit)', function(data){
              layer.msg(JSON.stringify(data.field));
              return false;
            });


            table.render({
                id:'id',
                elem: '#test',
                url:'../BeginnerAdmin/datas/user.json',
                cellMinWidth: 80,
                height: 'full-100',
                cols: [[
                  // {checkbox: true, fixed: 'left'},
                  {field:'username', width:winWidth, title: '加入时间', event: 'setSign',sort: true},
                  {field:'sex', width:winWidth, title: '微信号', sort: true},
                  {field:'city', width:winWidth, title: '微信昵称', sort: true},
                  {field:'sign', width: winWidth, title: '姓名', minWidth: 100},
                  {field:'experience',width:winWidth,  title: '当前步数', sort: true},
                  {field:'score',width:winWidth,  title: '本周步数', sort: true},
                  {field:'classify',width:winWidth, title: '本月步数', sort: true},
                  {field:'wealth', width:winWidth, title: '本年步数', sort: true},
                  {field:'oprate', width:200, title: '操作', sort: true, fixed: 'right', toolbar: '#barDemo'}
                ]],
                page: true
              });


              table.on('tool(demoEvent)', function(obj){
                    var data = obj.data;
                    var id = data.id;
                    var username = data.username;
                    if(obj.event === 'edit'){
                        uerLayer = layer.open({
                            type:1,
                            title:'修改'+username + '信息',
                            area:["400px", "360px"],
                            content: $("#userMange")
                        })

                        form.on('submit(addCommit)', function(data){
                          layer.msg(JSON.stringify(data.field));
                          return false;
                        });

                    } else if(obj.event === 'disable'){
                        layer.confirm('真的禁用吗？', function(index){
                            layer.close(index);
                        });
                    } else if(obj.event === 'enable'){
                        layer.confirm('真的启用吗？', function(index){
                            layer.close(index);
                        });
                    }else if(obj.event === 'del'){
                        layer.confirm('真的删除吗？', function(index){
                            //obj.del();
                            layer.close(index);
                        });
                    }
              });  
              // table.on('tool(demoEvent)', function(obj){
              //   var data = obj.data;
              //   if(obj.event === 'setSign'){
              //     layer.prompt({
              //       formType: 2
              //       ,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
              //       ,value: data.sign
              //     }, function(value, index){
              //       layer.close(index);
                    
              //       //这里一般是发送修改的Ajax请求
                    
              //       //同步更新表格和缓存对应的值
              //       obj.update({
              //         sign: value
              //       });
              //     });
              //   }
              // });
        });
    </script>

</body>

</html>